<script setup lang="ts">
import { ref } from "vue";

defineOptions({
  name: "CarIntelligentDriving"
});
const config = ref({
  data: [
    ["抖音", "风一样-正在直播", "25岁-男-广州"],
    ["今日头条", "花开的小小-发布了蔚来汽车", "25岁-女-深圳"],
    ["快手", "TanMu-分享了视频", "35岁-女-广州"],
    ["百度", "花海般的天空-正在直播", "33岁-男-北京"],
    ["微信", "酱酱-正在直播", "25岁-女-广州"],
    ["小红书", "度假了嘟-分享了视频", "25岁-男-成都"],
    ["微博", "搓搓拉拉-发布了自己的智驾视频", "29岁-男-广州"],
    ["B站", "吹风-分享了视频", "55岁-男-上海"],
    ["网易", "小可-分享了视频", "33岁-女-上海"],
    ["腾讯新闻", "道可道-分享了视频", "26岁-男-上海"]
  ],
  headerBGC: "transparent", // 表头背景色
  oddRowBGC: "transparent", // 奇数行背景色
  evenRowBGC: "transparent", // 偶数行背景色
  columnWidth: [100, 190],
  align: ["center", "center", "center"],
  headerHeight: 35,
  rowNum: 6,
  index: false // 不显示行号
});
</script>

<template>
  <div class="carAspect-box">
    <div class="carAspect-box-title">
      <span>汽车智能驾驶</span>
    </div>
    <dv-scroll-board
      :config="config"
      class="carAspect-box-content transparent-table"
    />
  </div>
</template>

<style lang="scss" scoped>
$title-height: 3rem;

.carAspect-box {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-weight: 600;

  .carAspect-box-title {
    box-sizing: border-box;
    width: 100%;
    height: $title-height;
    padding: 1rem;
    color: #fff;
    border-bottom: #3b4777 1px solid;
  }

  .carAspect-box-content {
    box-sizing: border-box;
    width: 100%;
    height: calc(100% - $title-height);
  }

  // 使用深度选择器来修改组件内部样式
  :deep(.transparent-table) {
    background-color: transparent !important;

    .header {
      background-color: transparent !important;
    }

    .rows .row {
      background-color: transparent !important;
    }
  }
}
</style>
